<template>
    <div class="photolist">
        <myheader title="图片列表" ></myheader>
        <ly-tab
            v-model="selectedId"
            :items="items"
            :options="options"
            :fixBottom="true"
            @change="getImg">
        </ly-tab>
        <imglist :list="imglist"></imglist>
    </div>
</template>

<script>
    import myheader from '../../components/Header'
    import imglist from '../../views/photo/imgList'
    import {Toast} from 'mint-ui'
    export default {
        name: "photoList",
        components:{
            myheader,
            imglist
        },
        data () {
            return {
                selectedId: 0,
                items: [],
                options: {
                    activeColor: '#007aff'
                    // 可在这里指定labelKey为你数据里文字对应的字段
                },
                imglist:[]
            }
        },
        methods:{
            getPhotoLabel(){ //获取图片列表导航的 标签数据
                this.$http.get('api/getimgcategory').then(res=>{
                    res.body.message.unshift({title:'全部图片',id:0});
                    res.body.message.forEach(item=>{ //item.表示数组中的每一项
                        item.label = item.title  //每一项加一个label的属性，并给它赋值，值就是title的值
                    })

                    this.items = res.body.message

                },err=>{
                    Toast('获取图片标签数据失败！！')
                })
            },
            getPhotoList(id){//获取标签对应的图片,这个方法需要多次调用，首先页面加载时候要获取所有的图片
                this.$http.get('api/getimages/'+id).then(res=>{
                    if (res.body.message.length===0) {
                        Toast('暂时没有相关图片')
                    }
                    this.imglist =res.body.message
                },err=>{
                    Toast('获取图片失败')
                })
            },
            getImg (item) { //这是图片导航链接的事件方法
                this.getPhotoList(item.id)
            }
        },
        created(){
            this.getPhotoLabel();
            this.getPhotoList(0)
        }

    }
</script>

<style scoped lang="scss">
    /*父组件设置子组件的样式可以使用::v-deep方式来穿透*/
::v-deep a{
    color: #333333;
}
</style>
